<template>
  <div class="form-section">
    <ra-multi-lang
      v-model="modelValue.translations"
      :languages="languageList"
      :required="false"
      :prop-prefix="'formData'"
      :show-key-input="true"
      :key-value="modelValue.key"
      :key-prop="'key'"
      :loading="loading"
      @update:keyValue="handleKeyUpdate"
      @getTransData="handleGetTransData"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue';

// Props定义
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
  languageList: {
    type: Array,
    default: () => [],
  },
});

// 事件定义
const emit = defineEmits(['update:modelValue', 'getTransData']);

// 响应式数据
const loading = ref(false);

// 处理语言键更新
const handleKeyUpdate = (newKey) => {
  emit('update:modelValue', {
    ...props.modelValue,
    key: newKey,
  });
};

// 处理获取翻译数据事件
const handleGetTransData = () => {
  loading.value = true;
  emit('getTransData');
  // 这里可以根据实际需要在获取数据完成后设置 loading.value = false
  // 或者通过 props 传入 loading 状态
  setTimeout(() => {
    loading.value = false;
  }, 1000); // 示例：1秒后取消加载状态
};
</script>

<style lang="scss" scoped></style>
